/*
 * @Author: Await
 * @Date: 2025-05-08 16:20:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-08 15:31:08
 * @Description: 关系图组件
 */
import React, { useRef } from 'react';
import { ChartConfig, DataItem, DataConfig, ThemeOption } from '../../../types/index';
import ChartBase, { ChartBaseRef } from '../ChartBase';
import { ChartType } from '../../../types/chartTypes';

interface GraphChartProps {
    config: ChartConfig;
    data: DataItem[];
    dataConfig?: DataConfig;
    theme?: ThemeOption;
    height?: string | number;
    width?: string | number;
}

/**
 * 关系图组件 - 用于展示网络关系数据
 */
const GraphChart: React.FC<GraphChartProps> = ({
    config,
    data,
    dataConfig,
    theme,
    height = '400px',
    width = '100%'
}) => {
    const chartRef = useRef<ChartBaseRef>(null);

    // 确保配置中包含关系图所需的设置
    if (!config.type || config.type !== ChartType.GRAPH) {
        config.type = ChartType.GRAPH;
    }

    // 特殊处理关系图数据格式
    const processedData = React.useMemo(() => {
        // 分析数据结构，如果没有符合关系图要求的数据，创建示例数据
        if (!data || data.length === 0 ||
            !data[0].source || !data[0].target) {
            console.warn('关系图数据格式不正确，需要包含source和target字段');

            // 返回原始数据，让图表自己处理错误
            return data;
        }

        return data;
    }, [data]);

    return (
        <div style={{ height, width }}>
            <ChartBase
                ref={chartRef}
                option={config}
                data={processedData}
                dataConfig={dataConfig}
                theme={theme}
                renderer="canvas"
            />
        </div>
    );
};

export default GraphChart;